<script setup lang="ts">
import type {ComputedRef} from "vue";
import {computed, onMounted, reactive} from "vue";
import type {RouteRecordRaw} from "vue-router";
import {useRoute, useRouter} from "vue-router";
import Login from "@/components/Login.vue";
import {$ref} from "vue/macros";

const router = useRouter();
let visible = $ref(false);
let userInfo = $ref({})
//左侧导航开关
let collapsible = $ref(false);
//左侧导航
let navLeftMode = $ref(true);
//导航数据
let menuData: RouteRecordRaw[] | undefined = $ref([]);
let selectedKeys: ComputedRef<string[]> = computed(() => [useRoute().path]);

/**
 * 左侧导航开关
 */
function collapsed() {
  collapsible = !collapsible;
}

function menuSelect(menu: any) {
  router.push({path: menu.key});
}

function signOut() {
  localStorage.clear()
  visible = true
}
function signIn() {
  localStorage.clear()
  visible = true
}
function loginSuccess() {
  console.log("loginSuccess")
  const userInfoData = localStorage.getItem("userInfo")
  if (userInfoData){
    userInfo = JSON.parse(userInfoData as string)
    console.log('userInfo',userInfo)
  }
}
onMounted(async () => {
  const routers = router.options.routes.find((ele) => ele.path == "/");
  menuData = routers?.children;
  const userInfoData = localStorage.getItem("userInfo")
  visible = !userInfoData
  if (userInfoData){
    userInfo = JSON.parse(userInfoData as string)
  }

});
</script>
<template>
  <a-layout class="ant-layout-pro-basic">
    <a-layout-sider
        v-if="navLeftMode"
        class="ant-layout-pro-sider"
        :collapsed="collapsible"
        :collapsedWidth="48"
        width="208"
    >
      <div class="ant-pro-sider-logo">
        <a href="/" class="router-link-active">
          <span class="anticon">
<!--            <img-->
            <!--              src="@/assets/logo.svg"-->
            <!--              alt="logo"-->
            <!--              :class="collapsible ? 'collapsed-logo-img' : ''"-->
            <!--            />-->
          </span>
          <h1 v-if="!collapsible">教学系统</h1>
        </a>
      </div>
      <div style="display:flex;flex: 1 1 0; overflow: hidden auto">
        <a-menu
            theme="dark"
            mode="inline"
            :selected-keys="selectedKeys"
            @select="menuSelect"
            :style="{ lineHeight: '64px' }"
        >
          <a-menu-item v-for="({path,name}) in menuData"
                       :key="path" :title="name">
            {{ name }}
          </a-menu-item>

        </a-menu>
      </div>
      <div class="ant-pro-sider-links">
        <a-menu theme="dark" mode="inline">
          <a-menu-item key="1" @click="collapsed">
            <i
                class="iconfont"
                :class="
                collapsible
                  ? 'icon-arrow-double-right'
                  : 'icon-arrow-double-left'
              "
            ></i>
          </a-menu-item>
        </a-menu>
      </div>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="padding: 0">
        <div class="ant-pro-header-content">
          <div class="ant-pro-header-logo" v-if="!navLeftMode">
            <a href="/" class="router-link-active">
              <span class="anticon">
                <img
                    src="@/assets/logo.svg"
                    alt="logo"
                    :class="collapsible ? 'collapsed-logo-img' : ''"
                />
              </span>
              <h1>Admin wcj{{ visible }}</h1>
            </a>
          </div>
          <div style="flex: 1 1 0%">
            <a-menu
                theme="light"
                mode="horizontal"
                :selected-keys="selectedKeys"
                @select="menuSelect"
                :style="{ lineHeight: '64px' }"
                v-if="!navLeftMode"
            >
              <a-menu-item v-for="({path,name}) in menuData"
                           :key="path" :title="name">
                {{ name }}
              </a-menu-item>

            </a-menu>
          </div>
          <div style="display: flex; align-items: center; justify-content: center">
            <!--            <div class="ant-pro-header-badge">-->
            <!--              <a-badge :count="99" :overflow-count="99">-->
            <!--                <i-->
            <!--                  class="iconfont icon-notification ant-pro-header-badge-icon"-->
            <!--                ></i>-->
            <!--              </a-badge>-->
            <!--            </div>-->
            <a-dropdown>
              <a @click.prevent class="ant-pro-header-user">
                <a-avatar style="color: #f56a00; background-color: #fde3cf">
                  {{ userInfo.userName?.substring(0, 1) || "算" }}
                </a-avatar>
                <div class="name"
                      v-if="userInfo.userName">{{ userInfo.userName }}</div>
                <div class="name" v-else @click="signIn">请登录</div>
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item> 个人中心</a-menu-item>
                  <a-menu-item> 个人设置</a-menu-item>
                  <a-menu-item @click="signOut"> 退出登录</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content class="ant-pro-content">
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer>
        <div class="footer-container">

          <span>课程内容版权均归 北京泛华卓越企业管理顾问有限公司 所有</span>
          <span>京ICP备11013658号-2</span>
        </div>

      </a-layout-footer>
    </a-layout>
  </a-layout>
  <Login v-model:visible="visible" @loginSuccess="loginSuccess"></Login>
</template>

<style scoped lang="less">
.nav-text {
  margin-left: 10px;
}

.ant-layout-pro-basic {
  width: 100%;
  min-height: 100vh;
}

.ant-layout-pro-sider {
  overflow: hidden;
  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
}

/deep/ .ant-layout-sider-children {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ant-pro-sider-logo,
.ant-pro-header-logo {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 16px;
  line-height: 32px;
  cursor: pointer;

  .router-link-active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;

    img {
      height: 32px;
      display: inline-block;
      vertical-align: middle;
      transition: height 0.2s;
    }

    h1 {
      display: inline-block;
      height: 32px;
      margin: 0 0 0 12px;
      overflow: hidden;
      color: #fff;
      font-weight: 600;
      font-size: 18px;
      line-height: 32px;
      vertical-align: middle;
      -webkit-animation: fade-in;
      animation: fade-in;
      -webkit-animation-duration: 0.2s;
      animation-duration: 0.2s;
    }
  }
}

.ant-pro-header-logo {
  h1 {
    color: #181818 !important;
  }
}

.ant-pro-sider-links {
  width: 100%;

  /deep/
  .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal),
  .ant-menu-item-selected {
    background-color: transparent;
  }
}

.ant-pro-fixed-stuff {
  flex-shrink: 0;
  transition: width 0.2s;
}

.ant-layout-footer,
.ant-layout-header {
  flex: 0 0 auto;
}

.ant-pro-header-content {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0 16px;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}

.ant-pro-header-collapsed-button {
  display: flex;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
}

.ant-pro-header-badge {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: -10px;
}

.ant-pro-header-badge-icon {
  font-size: 20px;
  margin-top: 10px;
}

.ant-pro-header-user {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 20px;

  .name {
    margin-left: 10px;
    color: #333;
    letter-spacing: 0.2rem;
  }
}

.ant-pro-content {
  min-height: 800px;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.collapsed-logo-img {
  width: 18px;
  transition: all 0.3s;
}

.footer-container {
  background: #212121;
  border-top: 1px solid #444;
  text-align: center;
  padding: 20px 0;
  line-height: 30px;
  color: #c1c1c1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/deep/ .ant-layout-footer {
  padding: 0;
}

</style>
